<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <canvas id="myCanvas" width="1000px" height="1000" style="border: solid 1px yellow"></canvas>
</body>
<script>
    function showDraw() {
        var myCanvas = document.getElementById("myCanvas");
        var ctx = myCanvas.getContext("2d");
        var dx = 150;
        var dy = 150;
        var s = 100;
        ctx.beginPath();
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI/15*11;
        for(var i = 0;i < 30;i ++){
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            ctx.lineTo(dx + x * s,dy + y * s);
        }
        ctx.closePath();
        ctx.stroke();
    }
    window.addEventListener("load",showDraw);
</script>
</html>